// 柱状图
var dataAxis = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
var barData = [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149]
var yMax = 500
var dataShadow = []
for (var i = 0; i < barData.length; i++) {
  dataShadow.push(yMax);
}
var leftOption1 = {
  xAxis: {
    show: false,
    data: dataAxis,
    axisLabel: {
      inside: false,
      textStyle: {
        color: '#fff'
      }
    },
    axisTick: {
      show: false
    },
    axisLine: {
      show: false
    },
    z: 10
  },
  yAxis: {
    show: false,
    axisLine: {
      show: false
    },
    axisTick: {
      show: false
    },
    splitLine: {
      show: false
    },
    axisLabel: {
      textStyle: {
        color: '#999'
      }
    }
  },
  grid: {
    left: 0,
    right: '20.3%',
    bottom: 0,
    top: 0
  },
  series: [{ // For shadow
      type: 'bar',
      itemStyle: {
        normal: {
          color: 'rgba(0,0,0,0.05)'
        }
      },
      barGap: '-100%',
      barCategoryGap: '40%',
      data: [],
      animation: false
    },
    {
      type: 'bar',
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(
            0, 0, 0, 1,
            [{
                offset: 0,
                color: '#83bff6'
              },
              {
                offset: 0.5,
                color: '#188df0'
              },
              {
                offset: 1,
                color: '#188df0'
              }
            ]
          )
        },
        emphasis: {
          color: new echarts.graphic.LinearGradient(
            0, 0, 0, 1,
            [{
                offset: 0,
                color: '#2378f7'
              },
              {
                offset: 0.7,
                color: '#2378f7'
              },
              {
                offset: 1,
                color: '#83bff6'
              }
            ]
          )
        }
      },
      data: barData
    }
  ]
};

// 曲线图
var dataLen = 10
var leftOption2 = {
  color: ['rgb(47,112,250)', 'rgb(224,118,25)'],
  textStyle: {
    color: 'rgb(145,145,145)'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'line',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  legend: {
    show: false,
    // left: '80%',
    // right: 0,
    // top: '30%',
    orient: 'horizontal',
    data: ['in', 'out'],
    textStyle: {
      color: 'rgb(145,145,145)',
      fontSize: 12
    }
  },
  grid: {
    left: 0,
    right: '20.3%',
    bottom: 0,
    top: 0
  },
  xAxis: [{
    show: false,
    type: 'category',
    boundaryGap: false,
    data: function () {
      var res = [];
      for (var i = 1; i <= dataLen; i++) {
        res.push(i);
      }
      return res;
    }()
  }],
  yAxis: [{
    show: false,
    type: 'value'
  }],
  series: [{
    name: 'in',
    type: 'line',
    smooth: true,
    areaStyle: {
      normal: {
        color: 'rgba(27,85,245,0.40)'
      }
    },
    data: [120, 132, 101, 134, 90, 230, 210, 399, 499, 599]
  }, {
    name: 'out',
    type: 'line',
    smooth: true,
    areaStyle: {
      normal: {
        color: 'rgba(252,209,134,0.40)'
      }
    },
    data: [220, 182, 191, 234, 290, 330, 310, 200, 540, 100]
  }]
};

var leftChart1 = echarts.init(document.getElementById('left-chart-1'));
leftChart1.setOption(leftOption1);

var leftChart2 = echarts.init(document.getElementById('left-chart-2'))
leftChart2.setOption(leftOption2)

var leftChart3 = echarts.init(document.getElementById('left-chart-3'))
leftChart3.setOption(leftOption1)

var leftChart4 = echarts.init(document.getElementById('left-chart-4'))
leftChart4.setOption(leftOption2)


var option3 = {
  color: ['rgb(47,112,250)', 'rgb(224,118,25)'],
  textStyle: {
    color: 'rgb(145,145,145)'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'line',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  legend: {
    show: false,
    orient: 'horizontal',
    data: ['温度', '湿度'],
    textStyle: {
      color: 'rgb(145,145,145)',
      fontSize: 12
    }
  },
  grid: {
    left: 0,
    right: '20.3%',
    bottom: 0,
    top: 0
  },
  xAxis: [{
    show: false,
    type: 'category',
    boundaryGap: false,
    data: function () {
      var res = [];
      for (var i = 1; i <= 10; i++) {
        res.push(i);
      }
      return res;
    }()
  }],
  yAxis: [{
    show: false,
    type: 'value'
  }],
  series: [{
    name: '湿度',
    type: 'line',
    smooth: true,
    areaStyle: {
      normal: {
        color: 'rgba(27,85,245,0.40)'
      }
    },
    data: [65, 52, 67, 70, 60, 80, 78, 82, 76, 78]
  }, {
    name: '温度',
    type: 'line',
    smooth: true,
    areaStyle: {
      normal: {
        color: 'rgba(252,209,134,0.40)'
      }
    },
    data: [22, 18, 19, 23, 29, 20, 21, 25, 24, 20]
  }]
};
new Array(6).fill(1).forEach((v, i) => {
  echarts.init(document.getElementById('chart-weather-' + i)).setOption(option3)
})

// 曲线图数据模拟
var dataMock1 = function () {
  var grl = leftOption2.series[0].data,
      whl = leftOption2.series[1].data
  grl.shift();
  grl.push(Math.floor(Math.random() * 600));
  whl.shift();
  whl.push(Math.floor(Math.random() * 600));
  leftChart2.setOption(leftOption2)
  leftChart4.setOption(leftOption2)
};
setInterval(function () {
  dataMock1();
}, 2200);

setInterval(function () {
  var obj = leftOption1.series[1].data
  obj.shift();
  obj.push(Math.floor(Math.random() * 500));
  leftChart1.setOption(leftOption1);
  leftChart3.setOption(leftOption1);
}, 2200);